<template>
    <div id="box">
        <div id="head">购物车案例11 {{}}</div>
        <div id="content">
            <div class="patch" v-for="item in data" :key="item.id">
                <input v-model=" item.goods_state " id="int" type="checkbox">
                <div class="fritter">
                    <div> <img :src="item.goods_img" alt=""></div>
                    <div>
                        <div>
                             {{ item.goods_name }}
                        </div>
                        <div id="price">
                            <div id="rate">{{item.goods_price}}</div>
                            <div id="pcs">
                                <button @click="item.goods_count > 0 && item.goods_count--">-</button>
                                <input id="sm" type="text" v-model="item.goods_count" >
                                <button @click="item.goods_count++">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tail">
            <div>
                <input  type="checkbox" v-model="check">全部
            </div>
            <div>合计:{{ footing }}</div>
            <button id="but">结算{{ foot }}</button>
        </div>
    </div>
    
</template>

<script>
import bus from "../购物车.bus"
export default {
    data () {
        return {
        }
    },
    computed:{
        data() {
            return bus.data
        },  
        check: {
            set (a) {
               this.data.map((item) => item.goods_state = a)
            },
            get () {
              return  this.data.every(item => item.goods_state)
            },
        },
        footing() {
            return this.data.reduce((a, b) => {
              return b.goods_state ?  a + b.goods_price * b.goods_count : a
               
            }, 0)

        },
        foot() {
             return this.data.reduce((a, b) => {
               return b.goods_state ?  a + b.goods_count : a
            
            }, 0)

        }
    },
   
}
</script>

<style scoped>
    #box {
        position:relative;
    }
    #head {
        width:100%;
        height: 80px;
        background-color: rgb(0, 102, 255);
        display:flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
    #content{
        width: 100%;
        border:1px red solid;
        box-sizing: border-box;
    }
    #tail{
        width: 100%;
        height: 80px;
        border:1px red solid;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding:0 20px ;
    }
    .patch{
        display:flex;
        align-items: center
    }
    .fritter{
        display:flex;

    }
    .int{
        margin-top:12px;
    }
    #but {
        height: 32px;
        border-radius: 20px;
        background-color: royalblue;
        color:#fff;
    }
    #pcs{
        display:flex;
    }
    #price{
       display:flex;
       justify-content: space-around; 
       align-items: center;
       margin-top:18px;
    }
    #sm{
        width: 30px;
        height: 30px;
    }
    #rate{
        color:rgb(255, 0, 0);
    }
</style>